<template>
  <view class="swiper">
    <swiper @change="(e) => Emit.$emit('handle', 'swiper', e.detail.current)">
      <swiper-item class="swiperItem" v-for="(item, i) of data.items" :key="i">
        <image
          class="swiperImg"
          :src="item.pic_url"
          mode="aspectFill"
          lazy-load
          @click="see(item.pic_url)"
        ></image>
      </swiper-item>
    </swiper>

    <view class="num">{{ data.index + 1 }}/{{ data.items.length }}</view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {
          items: [],
          index: 0,
        };
      },
    },
  },

  methods: {
    see(current) {
      uni.previewImage({
        current,
        urls: this.data.items.map((el) => el.pic_url),
      });
    },
  },
};
</script>

<style lang="less" scoped>
.swiper {
  position: relative;
}

.swiper,
swiper,
.swiperItem,
.swiperImg {
  height: 750rpx;
  width: 100%;
}

// .swiperImg {
// }

.num {
  position: absolute;
  right: 24rpx;
  bottom: 34rpx;
  padding: 2rpx 0;
  width: 96rpx;
  text-align: center;
  border-radius: 32px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 24rpx;
}
</style>
